<template>
  <div v-loading="fullscreenLoading" class="app-container">
    <el-row>
      <el-text style="width: 80px; text-align: center">起始时间</el-text>
      <el-date-picker v-model="queryParams.starttime" placeholder="选择时间" value-format="YYYY-MM-DD" />
      <el-text style="width: 50px; text-align: center">工单</el-text>
      <el-input v-model="queryParams.productRequestName" style="width: 220px"></el-input>
      <el-text style="width: 80px; text-align: center">产品型号</el-text>
      <el-select v-model="queryParams.productSpecName" style="width: 220px" filterable clearable>
        <el-option v-for="item in FgcodeOptions" :key="item.productSpecName" :label="item.productSpecName" :value="item.productSpecName" />
      </el-select>
      <el-text style="width: 10px"> </el-text>
      <el-button type="primary" :icon="Search" @click="submitForm">查询</el-button>
    </el-row>
    <el-row style="margin-top: 8px">
      <el-table :data="storeDataList" border>
        <el-table-column prop="productRequestName" width="200px" label="工单号" align="center" />
        <el-table-column prop="productSpecName" width="400px" label="产品型号" align="center" />
        <el-table-column prop="processOperationName" label="工序ID" align="center" />
        <el-table-column prop="productBadDate" label="统计日期" align="center" />
        <el-table-column prop="badName" label="不良原因" align="center" />
        <el-table-column prop="qty" label="总量" align="center" />
        <el-table-column prop="badQty" label="不良数量" align="center" />
        <el-table-column prop="badRate" label="不良率" align="center" />
      </el-table>
    </el-row>
    <el-row class="pagination-container">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-sizes="[50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </el-row>
  </div>
</template>

<script setup name="BAD">
import { ref } from 'vue'
import { Fgcodelist, badlist } from '@/api/quality/bad.js'
import { forEach } from 'lodash'

const fullscreenLoading = ref(false)
const FgcodeOptions = ref([])
const storeDataList = ref([])
const storeList = ref([])
const storeDatasnList = ref([])

// 查询各站点产出的参数
const queryParams = reactive({
  starttime: '',
  productRequestName: '',
  productSpecName: ''
})

// 分页栏中的数据条数
const total = ref(0)
// 分页栏选中的页数
const page = ref(1)
// 每页显示的数据量
const pageSize = ref(50)

function getFgcodeList() {
  Fgcodelist().then((res) => {
    FgcodeOptions.value = res.data
  })
}

function submitForm() {
  //   console.log(value.value)
  // console.log(queryParams)
  fullscreenLoading.value = true
  storeDataList.value = []
  badlist({ ...queryParams }).then((res) => {
    // 清空表格
    storeDataList.value = []
    // 获得数据条数
    total.value = res.data.length
    // 暂存数据
    storeList.value = res.data
    getTableData()
  })
}
// 获得的数据导入表格
function getTableData() {
  storeDataList.value = storeList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
  fullscreenLoading.value = false
}
// val为分页栏中选中的页数
function currentChange(val) {
  // console.log(val)
  page.value = val
  getTableData()
}
// val为分页栏中选中的每页数据量
function sizeChange(val) {
  pageSize.value = val
  page.value = 1 // 切换每页数据量时，重置为第一页
  getTableData()
}
// 获得产品型号下拉列表
getFgcodeList()
</script>
<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  margin-top: 8px;
}
</style>